@import "lib.styl"
@import "customScroll.styl"
.time-input {
  display:inline-block;
  position relative
  input.default{
    border_box();
    outline: 0;
    width: 116px;
    height: 40px;
    border: 1px solid #e1e1e1;
    font-size: 12px;
    color: #656565;
    line-height: 40px;
    padding-left: 10px;
    &.act {
      border-color: #316ccb;
    }
    &.not-editable {
      border-color #e1e1e1
      background-color #f5f5f5
      // cursor not-allowed
    }
  }
  i.default{
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 11px;
    top: 12px;
    background: IMG;
    background_sizing(15px 210px);
    background-position: 0 -20px;
    z-index: 2;
    &:hover {
      background-position: 0 -405px
      &.not-editable {
        background-position: 0 -20px;
      }
    }
  }
}

.timepicker {
  z-index: 101;
  position: absolute;
  background-color: #ffffff;
  .scroll-field {
    width: 4px;
    bottom: 8px;
    position: absolute;
    top: 8px;
    right: 4px;
    border-radius: 2px;
    background-color: #f1f1f1;
  }
  .scroll-field .scroll-btn {
    width: 4px;
    height: 10px;
    background: #353535;
    opacity: 0.3;
    border-radius: 2px;
    position: relative;
  }
  .scroll-field .scroll-btn:hover{
    opacity: 0.5;
    cursor: pointer;
  }
  border_box();
  box_shadow(0 0 16px 0 rgba(197,197,197,.5))
  width: 116px;
  //height: 217px;
  *{
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .timepicer-box {
    clearfix();
  }
  .hourbox {
    float: left;
    height: 176px;
    overflow:auto;
    border-right: 1px solid #e1e1e1;
    border_box();
    width: 58px;
    position: relative;
    ul {
      width: 100%;
      padding: 8px 0;
      li {
        text-align: center;
        width: 100%;
        line-height: 32px;
        span {
          display:inline-block;
          font-size: 12px;
          color: #656565;
          height: 32px;
          width: 32px;
          line-height: 32px;
          text-align: center;
          cursor: pointer
          &.pastdue {
            //cursor not-allowed
            cursor default
            color #c5c5c5
            &:hover {
              background-color: #ffffff;
            }
          }
          &:hover {
            background-color: #f5f5f5;
          }
          &.active {
            color: #316ccb;
          }
        }
      }
    }
  }
  .minutesbox {
    float: right;
    height: 176px;
    width: 56px;
    overflow: auto;
    border_box();
    ul {
      width: 100%;
      padding: 8px 0;
      li {
        text-align: center;
        width: 100%;
        line-height: 32px;
        span {
          display:inline-block;
          font-size: 12px;
          color: #656565;
          height: 32px;
          width: 32px;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
          &.pastdue {
            //cursor not-allowed
            cursor default
            color #c5c5c5
            &:hover {
              background-color: #ffffff;
            }
          }
          &:hover {
            background-color: #f5f5f5;
          }
          &.active {
            color: #316ccb;
          }
        }
      }
    }
  }
  .time-btn{
    border_box();
    border-top: 1px solid #f1f1f1;
    height: 40px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    span {
      display:inline-block;
      width: 100%;
      height: 100%;
      font-size: 12px;
      color: #316ccb;
      cursor: pointer
      &.gray {
        color: #c5c5c5
        cursor: default
      }
    }
  }
}
.hs-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0);
  z-index: 100
}
